<template>
  <div class="home">
    <div class="leftContainer">
      <div class="ImgDiv1" @click="toPage('Test')">
        <div class="img_txt"><h3>堆场</h3></div>
      </div>
      <div class="ImgDiv2" @click="toPage('Test')">
        <div class="img_txt"><h3>水养池</h3></div>
      </div>
    </div>
    <div class="mainContainer"></div>
    <div class="rightContainer">
      <div class="ImgDiv3" @click="toPage('Test')">
        <div class="img_txt"><h3>钢筋笼</h3></div>
      </div>
      <div class="ImgDiv4" @click="toPage('Test')">
        <div class="img_txt"><h3>标号区</h3></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
const toPage = (page: string) => {
  router.push(page);
};
</script>
<style scoped>
.home {
  height: 100%;
}
.leftContainer,
.mainContainer,
.rightContainer {
  display: inline-block;
  width: 33%;
  height: 100%;
}
.ImgDiv1,
.ImgDiv2,
.ImgDiv3,
.ImgDiv4 {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  line-height: 300px; /* 设置图片中的文字垂直居中*/
  text-align: center; /* 设置图片中的文字垂直居中*/
  background-repeat: no-repeat; /*设置背景图片*/
  background-size: cover; /*设置背景图片*/
  width: 300px;
  height: 300px;
}
.ImgDiv1 {
  background-image: url("../assets/home/yard.jpg");
}
.ImgDiv1:hover {
  background-color: black;
}
.ImgDiv2 {
  background-image: url("../assets/home/waterAquarium.jpeg");
}
.ImgDiv3 {
  background-image: url("../assets/home/reinforcement.jpeg");
}
.ImgDiv4 {
  background-image: url("../assets/home/LabelArea.jpg");
}

.img_txt {
  margin-left: 130px;
  position: absolute;
}
</style>
